<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    :class="className"
    width="80%"
  >
    <div class="header">
      <div class="icon"></div>
      <div>
        <span>工单明细</span>
      </div>
    </div>
    <el-button
      class="query-btn"
      @click="handleExport"
    >数据导出</el-button>
    <el-table
      :data="tableData"
      v-loading="loading"
      element-loading-background="#0D1C42"
      stripe
    >
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        v-bind="item"
        align="center"
        :min-width="getMinWidth(item)"
      >
      </el-table-column>
    </el-table>

    <div
      slot="footer"
      class="dialog-footer"
      v-show="mode === '1'"
    >
      <el-button @click="handleClose">取消</el-button>
      <el-button
        class="query-btn"
        @click="handleClose"
      >确定</el-button>
    </div>
    <!-- 分页 -->
    <div class="pagination-box flex-h flex-he">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="pageSizes"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        small
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { getWorkOrderDetails, exportOrderData } from '@/api/big-screen/index.js'
export default {
  name: 'add',
  data () {
    return {
      loading: false,
      visible: false,
      title: '工单明细(仅制证)',
      className: 'custom-dialog',
      mode: '1',
      year: '',
      province: '',
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pageSizes: [10, 20, 50, 100],
      columns: [
        {
          type: 'index',
          label: '序号',
          width: '55',
          align: 'center',
          fixed: 'left'
        },
        {
          prop: 'workOrderNum',
          label: '工单编号',
          'show-overflow-tooltip': true
        },
        {
          prop: 'province',
          label: '所属省份',
          'show-overflow-tooltip': true
        },
        {
          prop: 'robotType',
          label: '机器人名称',
          'show-overflow-tooltip': true
        },
        {
          prop: 'resultType',
          label: '处理结果',
          'show-overflow-tooltip': true
        },
        {
          prop: 'resultReason',
          label: '处理原因',
          'show-overflow-tooltip': true
        },
        {
          prop: 'dealTime',
          label: '处理时间',
          'show-overflow-tooltip': true
        }
      ]
    }
  },
  computed: {
    getMinWidth () {
      return itemColumns => {
        const len = itemColumns.label.toString().length
        return `${len * 25}px`
      }
    }
  },
  methods: {
    // 分页
    handleSizeChange (val) {
      this.pageSize = val
      this.queryTable()
    },
    // 当前页
    handleCurrentChange (val) {
      this.pageNum = val
      this.queryTable()
    },
    // 打开弹窗
    handleOpen (val) {
      this.visible = true
      this.year = val.year
      this.province = val.province
      this.mode = val.mode
      this.className = this.mode === '2' ? 'dark-dialog' : 'custom-dialog'
      this.title = this.mode === '2' ? '' : '工单明细(仅制证)'
      this.queryTable()
    },
    handleClose () {
      this.pageNum = 1
      this.pageSize = 10
      this.tableData = []
      this.total = 0
      this.loading = false
      this.visible = false
    },
    // 获取表格内容
    queryTable () {
      const params = { year: this.year, province: this.province, pageNum: this.pageNum, pageSize: this.pageSize }
      this.loading = true
      getWorkOrderDetails(params).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    // 导出
    handleExport () {
      let params = { year: this.year, province: this.province }
      exportOrderData(params).then(res => {
        this.$download.downloadModel('工单明细数据.xlsx', res)
      }).catch(err => {
        this.$message.error(err)
      })
    }
  }

}
</script>

<style  lang="less" scoped>
.el-button {
  margin-bottom: 10px;
}
.dialog-footer {
  padding-top: 50px;
  text-align: center;
}
.pagination-box {
  margin-top: 20px;
  float: right;
}

:deep .pagination-box .el-select--mini .el-input--mini .el-input__inner {
  height: 22px;
  line-height: 22px;
}

:deep .pagination-box .el-select--mini .el-input--mini .el-input__icon {
  line-height: 22px;
}
.dark-dialog {
  ::v-deep .el-dialog {
    background-color: transparent;
    background-image: url("../../../../assets/home_page/dialog-bg.png");
    background-size: 100% 100%;
  }
  ::v-deep .el-dialog__header {
    padding: 15px;
    color: #fff;
  }
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    margin: 70px 20px 0 0;
  }
  ::v-deep .el-dialog__body {
    padding: 20px 50px 40px 50px;
    margin: 0 0 50px 0;
  }

  .header {
    display: flex;
    align-items: center;
    .icon {
      height: 10px;
      width: 10px;
      margin: 0 10px 0 0;
      background-color: #fff;
    }
    span {
      color: #e4f2ff;
      font-family: Alibaba PuHuiTi 2;
      font-size: 18px;
      font-weight: 500;
      font-style: italic;
      margin-bottom: 10px;
    }
  }
  .query-btn {
    border: none;
  }
  // 表格
  //去除下方白线
  ::v-deep .el-table::before {
    background: none;
  }

  ::v-deep .el-table th.el-table__cell {
    background: #0d1c42;
    color: #fff;
  }

  ::v-deep
    .el-table--striped
    .el-table__body
    tr.el-table__row--striped
    td.el-table__cell {
    background: #0d1c42;
    color: #fff;
    tbody {
      background: #0d1c42;
    }
  }

  ::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
    background: #0c2151;
    color: #fff;
  }

  //去除右侧白线
  .el-table--border::after {
    width: 0px;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    background: #1c4085;
  }

  ::v-deep .el-table__empty-block {
    background: #0c1e42;
    .el-table__empty-text {
      color: #fff;
    }
  }

  ::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
  }

  ::v-deep .el-table__fixed::before {
    background-color: transparent;
  }

  // 分页
  ::v-deep .el-pagination--small span {
    color: #fff;
  }
  ::v-deep .el-pagination .el-select .el-input .el-input__inner {
    color: #fff;
    border: 1px solid #8099c0;
    opacity: 0.8;
  }
  ::v-deep .el-pagination.is-background .el-pager li {
    background: #1c4085;
    border: 1px solid #8099c0;
    color: #fff;
    opacity: 0.8;
  }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #0e56cc;
    color: #fff;
  }
  ::v-deep .el-pagination .el-select .el-input .el-input__inner {
    background-color: #1c4085;
    border: 1px solid #8099c0;
    color: #fff;
    opacity: 0.8;
  }
  ::v-deep .el-pagination__editor.el-input .el-input__inner {
    background-color: #1c4085;
    border: 1px solid #8099c0;
    color: #fff;
    opacity: 0.8;
  }
  ::v-deep .el-pagination.is-background.el-pagination--small .btn-prev,
  ::v-deep .el-pagination.is-background.el-pagination--small .btn-next {
    background-color: #1c4085;
    border: 1px solid #8099c0;
    color: #fff;
    opacity: 0.8;
  }
}
</style>
